<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../../../lib/jquery-3.2.1.js"></script>
<script type="text/javascript" src="../../../js/lib/echarts.js"></script>
<title>无标题文档</title>
</head>

<body>
 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
<script type="text/javascript">
              var  myChart = echarts.init(document.getElementById('main'));
              var arr1=[],arr2=[];
              function arrTest(){
                $.ajax({
                  type:"post",
                  async:false,
                  url:"getuser.php",
                  data:{},
                  dataType:"json",
                  success:function(result){
                    if (result) {
                      for (var i = 0; i < result.length; i++) {
                          arr1.push(result[i].usernum);
                          arr2.push(result[i].deptname);
                      }
                    }
                  }
                })
                return arr1,arr2;
              }
              arrTest();
              var  option = {
			  title : {
        text: 'ECharts3',
        subtext: 'Chrome下测试数据'
    },
                    tooltip: {
                        show: true
                    },
                    legend: {
                       data:['deptname']
                    },
					toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    grid: {y: 70, y2:30, x2:20},
                    xAxis : [
                        {
                            type : 'category',
                            data : arr2
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
							axisLabel:{formatter:'{value} 人'}
                        }
                    ],
                    series : [
                        {
                            "deptname":"usernum",
							name:'各部门人数',
                            "type":"bar",
							itemStyle: {normal: {color:'rgba(193,35,43,1)', label:{show:true}}},
                            "data":arr1
                        }
                    ]
                };
                // 为echarts对象加载数据
                myChart.setOption(option);
            // }
    </script>	
</body>
</html>
